<template>
	<view class="page-order">
		<view class="page-order-title" :style="{ height: fixedTop + 'px', lineHeight: fixedTop * 1.5 + 'px' }">探店记录</view>
		<view class="page-order-tab" :style="{ top: fixedTop - 2 + 'px' }">
			<OrderTab :tabList="tabList" @changeTab="changeTab" />
		</view>

		<view :style="[mainStyle]">
			<view>
				<view v-for="(item, index) in AgentShopDataList" :key="item.id">
					<AgentShopOrderItem :index="index" :item="item" @refreshData="initOrder" />
				</view>
			</view>

			<NoData v-if="AgentShopDataList.length === 0" />
			<view v-if="haveNotData" class="no-data-button">
				<!-- 空状态下的样式 -->
				<view @click="goToAgentShop" style="margin-left: 20rpx">探店试试</view>
			</view>
		</view>
		<view class="safe-area"></view>
		<DistributionTabBar :tabIndex="2" />
		<!-- 提醒订阅 -->
		<Subscription :isPopup="isSubscription" />
	</view>
</template>
<script>
import { defaultImageUrl, isIos, getSystemInfo } from '@/utils';
import { getOrderNumberInfo } from '@/api/my';
import OrderTab from '@/components/orderCompontent/OrderTab.vue';
import AgentShopOrderItem from '@/components/orderCompontent/AgentShopOrderItem.vue';
import NoData from '@/components/orderCompontent/NoData.vue';
import Subscription from '@/components/orderCompontent/Subscription';
import DistributionTabBar from '@/components/distributionTabBar';
import { setLocal, getLocal } from '@/utils/srorage';
import srorageKey from '@/utils/srorage/key';
// 导入API
import { tdSeekApply } from '@/api/order';
const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);
const modelIsIos = isIos();

const { statusBarHeight } = getSystemInfo();
const fixedTop = Object.freeze((modelIsIos ? 44 : 48) + statusBarHeight);
export default {
	data() {
		return {
			fixedTop,
			haveNotData: false,
			AgentShopDataList: [], //探店list
			MaterialDataList: [], //素材list
			tabList: [],
			defaultAgentShopTab: [
				{ name: '全部', num: 0, select: true },
				{ name: '审核中', value: '10', num: 0, select: false, showNum: true },
				{ name: '待确认', value: '21', num: 0, select: false, showNum: true },
				{ name: '待探店', value: '11', num: 0, select: false, showNum: true },
				{ name: '已完成', value: '22', num: 0, select: false }
			],
			orderList: [],
			pageIndex: 1,
			total: 0,
			isSubscription: false,
			bankIcon,
			currentTitle: 0
		};
	},
	components: {
		NoData,
		Subscription,
		OrderTab,
		AgentShopOrderItem,
		DistributionTabBar
	},
	computed: {
		mainStyle() {
			return { marginTop: `${fixedTop + uni.upx2px(106) + 'px'}`, padding: '0 20rpx' };
		}
	},
	onLoad(options) {},
	onShow() {
		const mineIndex = getLocal(srorageKey.tdIndex);
		let currentIndex = 0;
		if (mineIndex > 0) {
			currentIndex = mineIndex;
		} else {
			currentIndex = 0;
		}
		this.currentTitle = Number('');
		this.tabList = this.defaultAgentShopTab;
		this.tabList[currentIndex].select = true;
		this.setSelectItem(currentIndex);
		this.initOrder();
	},
	onHide() {
		setLocal(srorageKey.tdIndex, -1);
	},
	onUnload() {
		setTimeout(() => {
			// this.isClose = true;
			uni.setStorageSync('storageRefreshOrderPagekey', false);
		}, 200);
	},
	onReachBottom() {
		const { AgentShopDataList, MaterialDataList, total, currentTitle, pageIndex } = this;
		if (currentTitle === 0) {
			if (AgentShopDataList.length < total) {
				this.getAgentShopOrder(pageIndex + 1);
			}
		}
	},
	methods: {
		// 获取订单信息
		getOrderNumberInfo(showUpdate = false) {
			getOrderNumberInfo().then((res) => {
				const {
					code,
					data: {
						td: { waitApprove = 0, waitFinish = 0, waitTd = 0 },
						resource,
						userTag
					}
				} = res;
				if (code !== 200) {
					return;
				}
				//waitApprove, waitFinish, waitTd
				this.defaultAgentShopTab[1].num = waitApprove;
				this.defaultAgentShopTab[2].num = waitFinish;
				this.defaultAgentShopTab[3].num = waitTd;
				if (this.currentTitle === 0) {
					this.tabList[1].num = waitApprove;
					this.tabList[2].num = waitFinish;
					this.tabList[3].num = waitTd;
				}

				if (this.currentTitle === 1) {
					this.tabList[1].num = resource && resource.waitApprove ? resource.waitApprove : 0;
				}

				if (showUpdate) {
					return;
				}

				const agentShopMedal = userTag.indexOf('探店达人') !== -1;

				if (!agentShopMedal) {
					this.haveNotData = true;
				}
			});
		},
		//前往探店首页
		goToAgentShop() {
			uni.switchTab({
				url: '/pages/tabBar/Index'
			});
		},
		goToMaterial() {
			uni.switchTab({
				url: '/pages/tabBar/Material'
			});
		},
		//初始化订单
		initOrder(showUpdate) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			this.getAgentShopOrder(1);
			this.getOrderNumberInfo(showUpdate);
		},
		//获取探店订单
		getAgentShopOrder(pageIndex) {
			uni.showLoading({
				title: '加载中'
			});
			const { tabList } = this;
			let status;
			for (const defaultAgentShopTabElement of tabList) {
				if (defaultAgentShopTabElement.select) {
					status = defaultAgentShopTabElement.value;
					break;
				}
			}
			const params = {
				pageIndex: pageIndex,
				status: status
			};
			tdSeekApply(params)
				.then((res) => {
					if (pageIndex === 1) {
						this.AgentShopDataList = res.data.records;
					} else {
						this.AgentShopDataList = this.AgentShopDataList.concat(res.data.records);
					}
					this.pageIndex = pageIndex;
					this.total = res.data.total;
					uni.hideLoading();
				})
				.catch((error) => {
					uni.hideLoading();
				});
		},
		//设置选中节点
		setSelectItem(index) {
			for (const tabListElement of this.tabList) {
				if (tabListElement.select) {
					tabListElement.select = false;
				}
			}
			this.tabList[index].select = true;
		},
		//切换tab
		changeTab(index) {
			if (this.tabList[index].select) {
				return;
			}
			this.setSelectItem(index);
			//回到顶部
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			//切换tab重新加载数据
			this.initOrder(true);
		},
		//跳转探店详情
		handleDetails(id) {
			// 查看详情
			uni.navigateTo({
				url: `/productOrderPage/orderDetails?orderId=${id}`
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';
.page-order {
	// min-height: 100vh;
	@include Db_iosBottomDistance(120rpx);
}
.no-data-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 48rpx;
	view {
		padding: 16rpx 48rpx;
		background: #f6f6f6;
		border-radius: 24rpx;
		border: 2rpx solid #ff6b11;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: #ff6b11;
	}
}
.page-order-title {
	z-index: 99;
	position: fixed;
	height: 140rpx;
	width: 100%;
	top: 0rpx;
	background: #ffffff;
	text-align: center;
	padding-bottom: 12rpx;
}
.page-order-tab {
	position: fixed;
	top: 158rpx;
	left: 0;
	z-index: 99;
}
page {
	background: #f6f6f6;
	overflow-x: hidden;
}

.ll-tab {
	height: 96rpx;
	line-height: 96rpx;
	background: #ffffff;
	padding: 0 24rpx;
	width: 100%;
	white-space: nowrap;
	box-sizing: border-box;
}
.ll-tab-item {
	height: 56rpx;
	line-height: 56rpx;
	color: #666666;
	font-size: 28rpx;
	display: inline-block;
	align-content: center;
	padding: 0 32rpx;
}
.ll-tab-item-activate {
	color: #ffffff;
	font-weight: 600;
	background: linear-gradient(135deg, #ffa01f 0%, #ff6e20 100%);
	border-radius: 16px;
}

.ll-tab-body {
	box-sizing: border-box;
	height: calc(100vh - 96rpx);
	margin-top: 92rpx;
}
.order-list {
	padding: 24rpx 24rpx 0;
	padding-bottom: env(safe-area-inset-bottom);
	::v-deep {
		.order-card {
			margin-bottom: 24rpx;
		}
	}
}

.order-card-footer {
	padding: 0 16rpx;
	&__body {
		height: 102rpx;
		border-top: 2rpx solid #eeeeee;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			font-size: 24rpx;
			color: #333333;
		}
		.but-item {
			min-width: 176rpx;
			height: 64rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 32rpx;
			background: #ff6b11;
			color: #ffffff;
			padding: 0 32rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
		.but-item-border {
			min-width: 176rpx;
			height: 64rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 32rpx;
			border: 2rpx solid #ff6b11;
			color: #ff6b11;
			padding: 0 32rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}
.safe-area {
	height: calc(32rpx + env(safe-area-inset-bottom));
}
</style>
